<template>
  <div class="nav flex">
    <div class="collapse">
      <i @click="foldMenu" :class="{'el-icon-s-fold': isCollapse, 'el-icon-s-unfold': !isCollapse}"></i>
    </div>
    <div class="company">{{companyName}}</div>
    <div class="utils">
      <div>
        <i @click="fullScreen" :class="{'el-icon-zoom-in': isCollapse, 'el-icon-zoom-out': !isCollapse}"></i>
      </div>
    </div>
    <div class="user">
      <el-avatar icon="el-icon-user-solid">user</el-avatar>
    </div>
    <el-button @click="logout">登出</el-button>
  </div>
</template>

<script>
  export default {
    name: "navBar",
    data() {
      return {
        isFullScreen: false,

        companyName: '陈龙威有限公司',
        logo: '',

      }
    },
    computed: {
      isCollapse() {
        return this.$store.state.isCollapse;
      }
    },
    methods: {
      foldMenu() {
        this.$store.commit('toggleCollapse', !this.isCollapse)
      },
      fullScreen() {
        const ele = document.body;
        if (!this.isFullScreen){
          if (ele.webkitRequestFullScreen) {
            ele.webkitRequestFullScreen();
          } else if (ele.mozRequestFullScreen) {
            ele.mozRequestFullScreen();
          } else if (ele.requestFullScreen) {
            ele.requestFullscreen();
          } else {
            return console.log("浏览器不支持全屏API或已被禁用  ");
          }
          this.isFullScreen = true;
        } else {
          document.exitFullscreen ? document.exitFullscreen() :
            document.mozCancelFullScreen ? document.mozCancelFullScreen() :
              document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
          this.isFullScreen = false;
        }
      },
      logout() {
        sessionStorage.clear();
        this.$router.push('/login')
      }
    }
  }
</script>

<style scoped>
.nav{
  border-bottom: solid 1px #e6e6e6;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
}
</style>
